<template>
	<view class="confirm-order">
		<view class="goods">
			<text>商品信息</text>
			<!-- v-for优先级高于v-if -->
			<!-- block是空标签 -->
			<template v-if="course && course.list">
				<course-item
				v-for="(item,index) in course.list"
				:key="index" :item="item"
				></course-item>
			</template>
			
			<course-item v-else :item="course">
			</course-item>
		</view>
		
		<view class="option-pay card">
			<view class="title">支付方式</view>
			<!-- APP端的IOS 设备上显示 -->
			<view v-if="isIOS" class="ios">
				<text>余额：</text>
				<text>{{balance}}币{{isPay ? '' : '(不足支付)'}}</text>
			</view>
			
			<!-- 非APP端的IOS 设备上显示 -->
			<radio-group v-else  @change="radioChange">
				<!-- 除了微信都显示 -->
				<!-- #ifndef MP-WEIXIN -->
				<label class="pay-item center space-between">
					<view class="left center">
						<image src="../../static/pay/alipay.png" ></image>
						<text>支付宝</text>
					</view>
						<!-- style="transform:scale(0.8)" 这个uniapp 里面一个样式 看示例 -->
						<!-- :checked="provider === 'alipay'"   动态默认选中  -->
						<radio value="alipay" :checked="provider === 'alipay'"  style="transform:scale(0.8)" />
				</label>
				<!-- #endif -->
				
				<!-- 除了支付宝 小程序都显示 MP-ALIPAY -->
				<!-- #ifndef MP-ALIPAY -->
				<!-- label标签点击这个整体就会触发 -->
				<label class="pay-item center space-between">
					<view class="left center">
						<image src="../../static/pay/wxpay.png" ></image>
						<text>微信支付</text>
					</view>
						<radio value="wxpay"  :checked="provider === 'wxpay'" style="transform:scale(0.8)"/>
				</label>
				<!-- #endif -->
				
			</radio-group>
			
		</view>
		<view class="card price">
			<view class="space-between" >
				<text>商品金额</text>
				<!-- 原价 priceOrigina 或  totalPrice 套餐 总原价 -->
				<text>￥{{course.priceOriginal  || course.totalPrice}}</text>
			</view>
			<view class="space-between" v-if="course.priceOriginal  || course.totalPrice" >
				<text>优惠价</text>
				<!-- 优惠价 priceDiscount  或  groupPrice  套餐的 组合价-->
				<text>￥{{course.priceDiscount  || course.groupPrice}}</text>
			</view>
		</view>
		
		<!-- 占位底部 -->
		<view style="height: 130rpx;"></view>
		
		<view class="pay space-between">
			<view>
				<text class="grey">实付金额：</text>
				<!-- <text>￥{{course.priceDiscount  || course.groupPrice  || course.priceOriginal || course.groupPrice }}</text> -->
				<text>{{payPrice}}</text>
			</view>
			<view>
				<!-- loading="true"  加载样式 -->
				<!-- disabled 按钮的禁用属性 -->
				<button v-if="isIOS"  class="btn" :loading="loading" :disabled="loading" @click="iosPayHandler" >{{isPay ? '立即' : '充值并'}}支付</button>
				
				<!-- 是否微信？ -->
				<!-- #ifdef MP-WEIXIN -->
				<button v-else  class="btn" :loading="loading"  :disabled="loading" @click="wxPayHandler" >立即支付</button>
				<!-- #endif -->
				
				<!-- 非微信-->
				<!-- #ifndef MP-WEIXIN -->
				<button v-else  class="btn" :loading="loading" :disabled="loading" @click="payHandler" >立即支付</button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	//course  组件
import courseItem from '@/components/common/course-item.vue'
//api 接口
import api from '@/api/order.js'
	export default {
		components:{
			courseItem
		},
		data() {
			return {
				course:{} ,  //商品信息
				isIOS:false,//是否为APP端的IOS设备
				provider:'alipay',// 选择支付方式
				loading:false,   //提交中
				balance: 0, // 余额（币）
			}
		},
     
		computed:{
			//支付金额
			payPrice(){
				return this.course.priceDiscount  || this.course.groupPrice  || this.course.priceOriginal || this.course.groupPrice 
			},
			isPay(){
				// 余额是否足够  true 足够  false不足
				return this.balance >= this.payPrice
			}
		},
		onLoad(option) {
			//url 限制 用的 decodeURIComponent 接收
			//注意： H5  app 会报错-解决-> 这里得replace(/%/g,'%25')  解决了 传递过来报错的原因 接收的时候一定要用到
			//非微信小程序转义 replace(/%/g,'%25')
			//#ifndef MP-WEIXIN  
			if(option.course)	this.course = JSON.parse(decodeURIComponent(option.course.replace(/%/g,'%25')));
			if(option.courseGroup)	this.course = JSON.parse(decodeURIComponent(option.courseGroup.replace(/%/g,'%25')));
			console.log(this.course,'courseGroup来自confirm页面的')
			//#endif 
			
			//微信小程序不需要转义
			//#ifdef MP-WEIXIN
			if(option.course)	this.course = JSON.parse(decodeURIComponent(option.course));
			if(option.courseGroup)	this.course = JSON.parse(decodeURIComponent(option.courseGroup));
			//微信小程序选中微信支付
			this.provider = 'wxpay'
			//#endif
			
			// #ifdef APP-PLUS
			//uni.getSystemInfoSync().platform  uniapp 官网 点API查询 设备 系统信息
			//保证ios平台上的app ios android
			this.isIOS = 	uni.getSystemInfoSync().platform === 'ios'
			console.log(this.isIOS,'IOS')
			console.log(uni.getSystemInfoSync().platform,'什么机型？')
			
			//app 平台上的app 查询余额
			 if(this.isIOS)	{
				 this.getBalance()
			 }
			// #endif
		},
		methods: { 
			// 注意: 这里要去打开支付模块 ,
			// manifest.json  的全部支付打开 alipay  - wxpay
			// 还有一个appId - Ios通用链接
			
			
			//如果判断IOS的机型的话 就可以进行余额查询
			async	getBalance(){
			//查询余额（币）
			const   { data}  = await api.getUserBalance()
			// console.log(typeof data,'data+我的余额')
			this.balance = data
 			},
			
			
			
			// APPLE应用支付
		async	iosPayHandler(){
				//1 支付金额 this.payPrice
				const  price  = this.payPrice
				//2 课程ids(单个课程、 课程套餐)
				let courseIds  =  [] 
				if(this.course.list ) {  //有list 就是套餐  
					//课程套餐的每个课程id
					this.course.list.forEach( item =>{
						courseIds.push(item.id)
					})
				}else{  // 没有list 就是单个课程
					//单个课程
					courseIds.push(this.course.id)
				}
				//提交后台数据
				const data  =  { 
					price:price,courseIds:courseIds
				}
				//3 余额不足 跳转充值页
				console.log(JSON.stringify(data),'data')
				console.log(this.isPay,'Pay')
				if( !this.isPay ) {
					this.navTo(`/pages/order/my-balance?params=${JSON.stringify(data)}`)
					return
				}
				//4 余额充足 调用服务接口支付
				this.loading = true   //加载中
				uni.showLoading({
					title:'支付中',
					mask:true  //不让他再次点击屏幕
				})
				const res = await	api.orderPay(data)
				uni.hideLoading() // 关闭加载
				
				//5 刷新当前余额  （跳转到订单页）
				if(res.code === 20000) {
					this.getBalance()
					uni.showModal({
						content:'支付完成，立即学习',
						showCancel:false,  //取消按钮
						success : ()=>{
							//跳转到订单页
							this.navTo('/pages/order/order')
						}
					})
				}else{
					uni.showModal({
						content:'支付失败，原因：'+ res.message ,
						showCancel:false,  //取消按钮
					})
				}
				this.loading = false
			},
			
			//登录微信小程序 获取用户openid
			loginWeixinMp(){
				// 小程序登录流程图
				// https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
				return new Promise( (resolve,reject) =>{
					// 1.先获取用户code   再获取openid
					uni.login({  //这个方法是获取当前的登录类型
						provider:'winxiin',
						success: async (res) => {
							console.log('res',res.code)
						// 第二步.再获取openid 调用后台服务接口
							//let {data:openid }  = await api.getUserOpenid() 
							let openid = 'openid-sadbaksjdbid'  
							// uni.setStorageSync 同步保存在本地
							uni.setStorageSync('openid',openid)
							resolve(openid)
						},
						fail: (error) => {
							reject(error)
						}
					})
				})
			},
			
			 
			
			//微信小程序支付
		async	wxPayHandler(){
				this.loading = true 
				//1.登录小程序  获取code  再获取openid 
				//如果本地有 说明之前有存储过  openid 
				let openid  =	uni.getStorageSync('openid')
				
				//如果没有则调用方法去请求 loginWeixinMp
				if(!openid){ 
					try{
						openid	  =  await	this.loginWeixinMp()
					}catch(error){
						//抛出异常reject 
						// 出现异常也就是说上面 loginWeixinMp  没有走resolve 
						console.error(error)
					}
					
					// 执行loginWeixinMp 异常的话 重新给按钮一个false
					if(!openid){
						uni.showModal({
							content:'获取openid失败',
							showCancel:false
						})
						//设置false  后让他重新在去获取openid
						this.loading = false
						return
					}
				}
				
				console.log('openid',openid)
				//2.通过openid 调用后台服务接口获取订单信息
				let  orderInfo = await	this.getOrderInfo(openid)
				
				
				//3.发起支付
				uni.requestPayment({
					...orderInfo,  
					//..orderInfo  等同于  下面↓
					// provider: 'wxpay',
					// timeStamp: String(Date.now()),
					// nonceStr: 'A1B2C3D4E5',
					// package: 'prepay_id=wx20180101abcdefg',
					// signType: 'MD5',
					// paySign: '',
					success:(res)=>{
						uni.showToast({
							title:'支付成功！'
						})
						//跳转到订单页面
						
					},
					fail:(error)=>{
						uni.showModal({
							content:'支付失败'+error.message,
							showCancel:false
						})
					},
					complete:()=> {
						this.loading = false
					}
				})
				
			},
			
			// 获取支付渠道
			radioChange(event){
				console.log(event,'event')  
				this.provider = event.detail.value
			},
			
			//安卓端APP支付
			async payHandler(){
				// #ifdef APP-PLUS
					
					// 注意: orderInfo 是promise 对象 
					// 要里面的resolve 和reject  
					// 就要 在他的方法上面在加一层  async 和await
					
					//支付中
					this.loading = true  //按钮不能在点击了
					
					// 1.获取订单信息
					let orderInfo = await this.getOrderInfo()
					console.log(orderInfo,'res')
					//如果没有订单信息就 获取失败
					if(!orderInfo){   
						unii.showModal({
							content:'获取支付订单信息失败',  
							showCancel:false  //取消按钮隐藏   | 只有一个确认按钮 
						})
						return 
					}
					// 2.发送支付请求
					uni.requestPayment({
						provider:this.provider,  //获取支付渠道 第三方是什么支付的  alipay 还是wxpay  在radioChange 这个方法里
						orderInfo:orderInfo,   //给订单信息
						success:()=>{
							uni.showToast({
								title:'支付成功'
							})
							//跳转订单页面
						},
						fail:(error)=> {
							console.log('支付失败',error)
							uni.showModal({
								content:'支付失败',
								showCancel:false
							})
						},
						complete: () => {
							//按钮设置为false
							this.loading = false
						}
						
					})
				// #endif
				
				
				// #ifdef H5
				
				// #endif
			},
			
			//支付宝 -微信  接口	
			getOrderInfo(openid){
				// 注意: async  写在promise 里面
				return  new Promise ( async (resolve,reject)=>{
					
					//这里调用的是微信小程序 - 因为传了openid才会走这里if  走完就resolve  + return 结束了这个方法
					if(openid){
						 
						// 注意你:这里的orderInfo 对象要看文档 : 微信小程序文档
						// https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_2.shtml
						 
						//微信小程序发送请求到服务端获取订单信息
						// 注意: 这里少写了一个接口, orderInfo 是代替接口对象返回数据  
						// await.api.getOrderInfoWxpayMP({openid:openid})
						// orderInfo 的属性可以查看:
						// https://uniapp.dcloud.io/api/plugins/payment.html 
						// 后端响应数据给我们  下面的orderinfo  是模拟数据  
						 let orderInfo =  {
							 timeStamp: "1414561699",
							 nonceStr: "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
							 package: "prepay_id=wx201410272009395522657a690389285100",
							 signType: "RSA",
							 paySign: "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==",
						 }
						 resolve(orderInfo)
						 return 
					}
					
					let  res = null   
					let  data =  {}   ////提交给后端的数据 （自行扩展）
					if(this.provider === 'alipay'){
						//注意  ： await 
						//请求接口 -  支付宝
						res = 	await	api.getOrderInfoAlipay(data)
					}else if(this.provider === 'wxpay'){
						//请求接口  - 微信
						res =  await  api.getOrderInfoWxpay(data)
					}
					 
					//判断返回是否成功数据  | 成功后返回  res.data 否则 响应后端错误message 
					if(res.code === 20000){
						resolve(res.data)
					}else{
						reject(new Error('获取支付信息失败,原因：' + res.message))
					}
				}) 
			}
		}
	}
</script>

<style lang="scss">
	.confirm-order{
		font-size: 29rpx;
		color: #333;
	}
	.goods{
		padding:20rpx 30rpx 0  30rpx;
		background-color: #FFFFFF;
	}
		
	.card{
		padding:0 30rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		box-shadow: 1px 0 5px 0 rgba(0,0,0,0.08);  //背景阴影
		border-radius: 20rpx;
		
		
	}
	.option-pay{
		.title{
			line-height: 90rpx;
			border-bottom: $xg-underline;//下划线
		}
		.ios{
			line-height: 90rpx;
			text:last-child{  //last-child父标签的最后一个元素
				color:red ;
			}
		}
		.pay-item{
			line-height: 90rpx;
			.left{
				image{
					width: 60rpx;
					height: 60rpx;
				}
				text{
					font-size: 33rpx;
					padding-left: 20rpx;
				}
			}
		}
	} 
	.price{
		>view{
			line-height: 90rpx;
			border-bottom: 1px solid #F8F9FB;
		}
	}
	.pay{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		border-top: $xg-underline;
		//class pay 下的第一个元素 view first-child  然后>指向text:last-child  最后一个元素
		// 父元素下的第一个元素first-child  父元素下的最后一个元素last-child
		view:first-child >text:last-child{ 
			color: red;
			font-size: 35rpx;
		}
		.btn{
			background-color: $xg-color-primary;
			color: #FFFFFF;
			border-radius: 50rpx;
			line-height: 80rpx;
			font-size: 25rpx;
			//插入元素 
			&::after{
				border: none;
			}
		}
	}
	
</style>
